<!--
 * @Author: ChunLai
 * @Date: 2022-09-21 18:05:26
 * @LastEditTime: 2025-09-09 14:47:39
 * @Description: 新接口 
 * @FilePath: \02.bldinsure\src\views\form\components\AsuBenefitItem.vue
-->
<template>
  <div class="newModel mb14">
    <!-- 用户类型 holderType-->
    <div class="of_hid">
      <div class="topSec">
        <div
          class="flex_ac ft14"
          style="line-height: 20px; font-family: MiSans"
        >
          受益人{{ pindex + 1 }}
          <span
            :class="enfold ? 'ms-row2-icon' : 'ms-row-icon'"
            style="margin-left: 8px"
            @click="enfold = !enfold"
          ></span>
        </div>
        <div class="flex_ac">
          <!-- <MsImgIcon
            name="abook_g"
            class="ml20"
            @click.native="openDirectory()"
            v-if="customerInfos === '1'"
          />
          <MsImgIcon
            name="photo"
            class="ml20"
            @click.native="showSheet = true"
          /> -->
          <MsImgIcon name="delete" class="ml20" @click.native="delUserItem" />
        </div>
      </div>
      <van-field
        :input-align="inputAlign"
        label="同投保人"
        v-if="showSame"
        clearable
        label-width="130"
      >
        <MsRadios
          slot="input"
          :curVal="sameAppent ? '1' : '0'"
          :arrList="yesNoCheckList"
          type="sameTbr"
          @change="changeAppent"
        />
      </van-field>
      <van-field
        label="是被保人的"
        :class="`bbr${bindex}syr${pindex}_relationToInsured`"
        @click="
          showPopAction(
            'picker',
            'relationToInsured',
            relationship,
            userInfo.relationToInsured
          );
          tipsInfo.relationToInsured = '';
        "
        :value="userInfo.relationToInsuredName"
        readonly
        placeholder="请选择"
        :error="tipsInfo.relationToInsured !== ''"
        :input-align="inputAlign"
      >
        <span
          class="ms-row-icon"
          slot="right-icon"
          v-if="relationship.length > 1"
        ></span>
      </van-field>
      <van-field
        label="姓名"
        :class="`bbr${bindex}syr${pindex}_name`"
        v-model="userInfo.name"
        :input-align="inputAlign"
        clearable
        placeholder="请输入"
        :error="tipsInfo.name !== ''"
        @focus="tipsInfo.name = ''"
        @blur="validInfo('name')"
      >
        <MsImgIcon
          name="abook_g"
          size="24"
          slot="button"
          @click.native="openDirectory()"
          v-if="customerInfos === '1'"
        />
      </van-field>
      <div class="enfold-line" v-show="!sameAppent && enfold">
        <van-field
          label="证件类型"
          :class="`bbr${bindex}syr${pindex}_idType`"
          @click="
            showPopAction('picker', 'idType', idTypeList, userInfo.idType)
          "
          @focus="tipsInfo.idType = ''"
          :value="userInfo.idName"
          readonly
          placeholder="请选择"
          :error="tipsInfo.idType !== ''"
          :input-align="inputAlign"
          v-if="infoReg.hasOwnProperty('idType')"
        >
          <span
            class="ms-row-icon"
            slot="right-icon"
            v-if="idTypeList.length > 1"
          ></span>
        </van-field>
        <van-field
          label="证件号码"
          :class="`bbr${bindex}syr${pindex}_idNum`"
          :input-align="inputAlign"
          v-model="cpCompute"
          clearable
          placeholder="请输入"
          :error="tipsInfo.idNum !== ''"
          @click="tipsInfo.idNum = ''"
          @focus="foI = true"
          @blur="
            foI = false;
            validInfo('idNum');
          "
        >
          <MsImgIcon
            name="camera_g"
            size="24"
            slot="button"
            @click.native="showSheet = true"
          />
        </van-field>
        <!-- 性别 -->
        <van-field
          label="性别"
          :class="`bbr${bindex}syr${pindex}_sex`"
          :input-align="inputAlign"
        >
          <div slot="input">
            <span class="btn_text thin-border" v-if="disabledSex">
              {{ userInfo.sex == "1" ? "女" : "男" }}
            </span>
            <MsRadios
              v-else
              :curVal="userInfo.sex"
              :arrList="sexList"
              type="sex"
              @change="changeMsRadio"
            />
          </div>
        </van-field>
        <van-field
          label="出生日期"
          :class="`bbr${bindex}syr${pindex}_birthDate`"
          @click-input="showPopAction('date', 'birthDate', [])"
          placeholder="请选择"
          :input-align="inputAlign"
        >
          <div class="age-box" slot="input">
            <span v-if="userInfo.birthDate"
              >{{ userInfo.birthDate }} ( {{ ageVal }}周岁 )
            </span>
            <span v-else style="color: #999">请选择</span>
          </div>
          <span
            class="ms-row-icon"
            slot="right-icon"
            v-if="!disabledSex"
          ></span>
        </van-field>
        <van-field
          class="set_flex1 bbr_sex"
          v-if="infoReg.hasOwnProperty('validDateEnd') && showLonger"
          :input-align="inputAlign"
        >
          <div slot="label" class="userSelect">
            <span>证件有效期</span>
            <FieldDescMode field="validDateEnd" />
          </div>
          <div slot="input">
            <MsRadios
              :curVal="longTime == userInfo.validDateEnd"
              :arrList="dateEndList"
              type="validDateEnd"
              @change="changeMsRadio"
            />
          </div>
        </van-field>
        <van-field
          label="有效期起期"
          :class="`bbr${bindex}syr${pindex}_validDate`"
          @click="showPopAction('date', 'validDate', [])"
          @focus="tipsInfo.validDate = ''"
          :value="userInfo.validDate"
          readonly
          placeholder="请选择"
          :error="tipsInfo.validDate !== ''"
          :input-align="inputAlign"
          v-if="infoReg.hasOwnProperty('validDate')"
        >
          <span
            class="ms-row-icon"
            slot="right-icon"
            v-if="!validDateStartDisabled"
          ></span>
        </van-field>
        <van-field
          label="有效期止期"
          class="border-line"
          :class="`bbr${bindex}syr${pindex}_validDateEnd`"
          @click-input="showPopAction('date', 'validDateEnd', [])"
          :value="
            userInfo.validDateEnd == longTime ? '长期' : userInfo.validDateEnd
          "
          readonly
          placeholder="请选择"
          @focus="tipsInfo.validDateEnd = ''"
          :error="tipsInfo.validDateEnd !== ''"
          :input-align="inputAlign"
          v-if="
            infoReg.hasOwnProperty('validDateEnd') &&
            (longTime !== userInfo.validDateEnd || !showLonger)
          "
        >
          <span
            class="ms-row-icon"
            slot="right-icon"
            v-if="!validDateDisabled"
          ></span>
        </van-field>
        <van-field
          label="国籍"
          :input-align="inputAlign"
          :class="`bbr${bindex}syr${pindex}_nationality`"
          @click="
            tipsInfo.nationality = '';
            showPopAction(
              'picker',
              'nationality',
              nationList,
              userInfo.nationality
            );
          "
          :value="userInfo.nationalityName"
          readonly
          placeholder="请选择"
          :error="tipsInfo.nationality !== ''"
          v-if="infoReg.hasOwnProperty('nationality')"
        >
          <span
            class="ms-row-icon"
            slot="right-icon"
            v-if="nationList.length > 1"
          ></span>
        </van-field>
        <van-field
          label="手机号码"
          label-width="170px"
          :class="`bbr${bindex}syr${pindex}_phone`"
          v-model="userInfo.phone"
          type="number"
          maxlength="11"
          clearable
          placeholder="请输入"
          @focus="
            foI2 = true;
            tipsInfo.phone = '';
          "
          @blur="foI2 = false"
          :error="tipsInfo.phone !== ''"
          :input-align="inputAlign"
          v-if="infoReg.hasOwnProperty('phone')"
        >
          <div slot="label" class="flexlabel">
            <span class="mr5">手机号码</span>
            <div
              class="same_to_btn"
              :class="phoneSameWithAppnt ? 'is_same_res' : ''"
              @click.stop="
                tipsInfo.phone = '';
                sameToAppnt($event, 'phone');
              "
            >
              同投保人
            </div>
          </div>
        </van-field>
        <van-field
          label="职业名称"
          :input-align="inputAlign"
          :class="`bbr${bindex}syr${pindex}_occupationCode`"
          @click="
            showPopAction('job', 'occupationCode', []);
            tipsInfo.occupationCode = '';
          "
          :value="userInfo.occupationCodeName"
          type="textarea"
          rows="1"
          autosize
          readonly
          placeholder="请选择"
          :error="tipsInfo.occupationCode !== ''"
          v-if="infoReg.hasOwnProperty('occupationCode')"
        >
          <span class="ms-row-icon" slot="right-icon"></span>
        </van-field>
        <van-field
          label="现居地址"
          :input-align="inputAlign"
          @click="showPopAction('address', 'areaName', [])"
          :value="userInfo.areaName"
          type="textarea"
          rows="1"
          autosize
          readonly
          placeholder="请选择"
          label-width="170px"
          @focus="tipsInfo.areaName = ''"
          :error="tipsInfo.areaName !== ''"
          v-if="infoReg.hasOwnProperty('areaName')"
        >
          <div slot="label" class="flexlabel">
            <span class="mr5">现居地址</span>
            <div
              class="same_to_btn"
              :class="isSameWithAppnt ? 'is_same_res' : ''"
              @click.stop="
                tipsInfo.areaName = '';
                sameToAppnt($event, 'areaName');
              "
            >
              同投保人
            </div>
          </div>
          <span class="ms-row-icon" slot="right-icon"></span>
        </van-field>
        <van-field
          label="详细地址"
          :input-align="inputAlign"
          :class="`bbr${bindex}syr${pindex}_permanentAddress`"
          v-model="userInfo.permanentAddress"
          type="textarea"
          rows="1"
          maxlength="30"
          autosize
          clearable
          :placeholder="`必须包含:${detailAddrRule}`"
          @focus="tipsInfo.permanentAddress = ''"
          @blur="validInfo('permanentAddress')"
          :error="tipsInfo.permanentAddress !== ''"
          v-if="infoReg.hasOwnProperty('permanentAddress')"
        />
        <!-- 邮政编码 zipCode -->
        <van-field
          label="邮政编码"
          :class="`bbr${bindex}syr${pindex}_zipCode`"
          @focus="tipsInfo.zipCode = ''"
          v-model="userInfo.zipCode"
          type="number"
          maxlength="6"
          clearable
          placeholder="请输入"
          :error="tipsInfo.zipCode !== ''"
          :input-align="inputAlign"
          v-if="infoReg.hasOwnProperty('zipCode')"
        />
        <van-field
          :class="`bbr${bindex}syr${pindex}_postalAreaName`"
          :value="userInfo.postalAreaName"
          @click-input="showPopAction('address', 'postalAreaName', [])"
          type="textarea"
          rows="1"
          autosize
          readonly
          placeholder="请选择"
          label-width="170px"
          :input-align="inputAlign"
          @focus="tipsInfo.postalAreaName = ''"
          :error="tipsInfo.postalAreaName !== ''"
          v-if="infoReg.hasOwnProperty('postalAreaName')"
        >
          <div slot="label" class="flexlabel">
            <div class="mr5">通讯地址</div>
            <div
              class="same_to_btn"
              :class="postSameHome ? 'is_same_res' : ''"
              @click.stop="
                tipsInfo.postalAreaName = '';
                setPostalToJuZhu(postSameHome == 1 ? '' : 1);
              "
              v-if="infoReg.hasOwnProperty('areaName')"
            >
              同居住地
            </div>
          </div>
          <span class="ms-row-icon" slot="right-icon"></span>
        </van-field>
        <van-field
          label="详细地址"
          class="border-line"
          :class="`bbr${bindex}syr${pindex}_postalPermanentAddress`"
          v-model="userInfo.postalPermanentAddress"
          :readonly="postSameHome == 1"
          type="textarea"
          rows="1"
          autosize
          clearable
          :placeholder="`必须包含:${detailAddrRule}`"
          :input-align="inputAlign"
          v-if="infoReg.hasOwnProperty('postalPermanentAddress')"
        />
        <van-field
          label="邮政编码"
          v-model="userInfo.postalZipCode"
          :readonly="postSameHome == 1"
          type="number"
          maxlength="6"
          clearable
          placeholder="请输入"
          :input-align="inputAlign"
          @focus="tipsInfo.postalZipCode = ''"
          :error="tipsInfo.postalZipCode !== ''"
          v-if="infoReg.hasOwnProperty('postalZipCode')"
        />
        <van-field
          :class="`bbr${bindex}syr${pindex}_homeAreaName`"
          :input-align="inputAlign"
          @click-input="showPopAction('address', 'homeAreaName', [])"
          :value="userInfo.homeAreaName"
          type="textarea"
          rows="1"
          autosize
          readonly
          label-width="170px"
          placeholder="请选择"
          @focus="tipsInfo.homeAreaName = ''"
          :error="tipsInfo.homeAreaName !== ''"
          v-if="infoReg.hasOwnProperty('homeAreaName')"
        >
          <div slot="label" class="flexlabel">
            <div class="mr5">家庭地址</div>
            <div
              class="same_to_btn"
              :class="homeSamePostal ? 'is_same_res' : ''"
              @click.stop="
                tipsInfo.homeAreaName = '';
                setHomeToPostal(homeSamePostal == 1 ? '' : 1);
              "
              v-if="infoReg.hasOwnProperty('postalAreaName')"
            >
              同通讯地
            </div>
          </div>
          <span class="ms-row-icon" slot="right-icon"></span>
        </van-field>
        <van-field
          label="详细地址"
          :input-align="inputAlign"
          :class="`bbr${bindex}syr${pindex}_homePermanentAddress`"
          v-model="userInfo.homePermanentAddress"
          :readonly="homeSamePostal == 1"
          type="textarea"
          rows="1"
          maxlength="30"
          autosize
          clearable
          :placeholder="`必须包含:${detailAddrRule}`"
          v-if="infoReg.hasOwnProperty('homePermanentAddress')"
        />
        <van-field
          label="年收入"
          :input-align="inputAlign"
          :class="`bbr${bindex}syr${pindex}_income`"
          :value="userInfo.income"
          type="number"
          placeholder="请输入"
          @input="(e) => (userInfo.income = money(e))"
          @focus="tipsInfo.income = ''"
          :error="tipsInfo.income !== ''"
          v-if="infoReg.hasOwnProperty('income')"
        >
          <template #button>
            <span class="field_unit">万元</span>
          </template>
        </van-field>
        <!-- 婚姻状况 -->
        <van-field
          label="婚姻状况"
          :class="`bbr${bindex}syr${pindex}_maritalStatus`"
          @click="
            showPopAction(
              'picker',
              'maritalStatus',
              maritalStatusList,
              userInfo.maritalStatus
            )
          "
          :value="userInfo.maritalStatusName"
          readonly
          placeholder="请选择"
          :input-align="inputAlign"
          v-if="infoReg.hasOwnProperty('maritalStatus')"
        >
          <span
            class="ms-row-icon"
            slot="right-icon"
            v-if="maritalStatusList.length > 1"
          ></span>
        </van-field>
      </div>
      <!-- 受益顺序 -->
      <van-field
        label="受益顺序"
        :class="`bbr${bindex}syr${pindex}_beneficialOrder`"
        @focus="tipsInfo.beneficialOrder = ''"
        :error="tipsInfo.beneficialOrder !== ''"
        :input-align="inputAlign"
        v-if="infoReg.hasOwnProperty('beneficialOrder')"
      >
        <div slot="input">
          <span v-if="Number(pindex) === 0">
            {{ userInfo.beneficialOrder }}
          </span>
          <MsRadios
            :curVal="userInfo.beneficialOrder"
            type="beneficialOrder"
            csstype="1"
            labelName="text"
            valueName="keyId"
            :arrList="beneficialOrderList"
            @change="(t, e) => changeData({ beneficialOrder: e.keyId })"
            v-else
          >
          </MsRadios>
        </div>
      </van-field>
      <!-- 受益比例 -->
      <van-field
        label="受益比例"
        :class="`bbr${bindex}syr${pindex}_beneficialRate`"
        @focus="tipsInfo.beneficialRate = ''"
        :error="tipsInfo.beneficialRate !== ''"
        :input-align="inputAlign"
        v-model="userInfo.beneficialRate"
        type="number"
        maxlength="3"
        clearable
        placeholder="请输入,最大值100"
        :formatter="formatNumber"
        v-if="infoReg.hasOwnProperty('beneficialRate')"
      >
        <template #button>
          <b style="font-size: 15px">%</b>
        </template>
      </van-field>
    </div>
    <van-popup v-model="showPop" round position="bottom">
      <van-picker
        v-if="popConfig.type == 'picker'"
        ref="picker"
        show-toolbar
        :columns="viewOptions"
        @confirm="onConfirmPick"
        @cancel="showPop = false"
        :default-index="defaultIndex"
      >
        <div slot="title" class="keyBox" v-if="popConfig.list.length > 8">
          <input
            type="text"
            class="keyInput"
            placeholder="请输入关键字查询"
            v-model="keyWord"
          />
        </div>
      </van-picker>
      <van-datetime-picker
        v-else-if="popConfig.type == 'date'"
        :value="currentDate"
        :min-date="minDate"
        :max-date="maxDate"
        type="date"
        @confirm="onConfirmDate"
        @cancel="showPop = false"
      />
      <OccupationPop
        v-else-if="popConfig.type == 'job'"
        utype="syr"
        @cancel="showPop = false"
        @confirm="onConfirmDJob"
      />
      <Address
        v-else-if="popConfig.type == 'address'"
        @cancle="showPop = false"
        :filterCode="filterCode"
        @addresssConfirm="addresssConfirm"
      />
    </van-popup>
    <OcrRecoganizePop
      :showOcrPop="showSheet"
      :ocrType="`syr-${pindex}`"
      @sureBtn="sureOcrRes"
      v-if="showSheet"
    >
    </OcrRecoganizePop>
    <CustomerDirectory
      v-if="showUserList"
      :ref="`${userFlag}CustomerDirectory`"
      @confirm="sureUserSelect"
      @cancel="showUserList = false"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { validUserInfo } from "@/translate/validate/customer";
import { userInfoMix } from "@/mixins/userInfo";
import { bbrAndSyrInfoMix } from "@/mixins/bbrsyr";
import { popupMixin } from "@/mixins/popup";
import { radioMixin } from "@/mixins/radios";
import FieldDescMode from "./FieldDescMode";

export default {
  name: "AsuBenefitItem",
  props: ["pindex", "bindex"],
  computed: {
    ...mapGetters({
      idTypeList: "dictionary/benefitIdTypeList",
      relationship: "dictionary/benefitRelationship",
      yesNoCheckList: "dictionary/yesNoCheckList",
      benefyOrderMax: "page/benefyOrderMax",
      benefyNumMax: "page/benefyNumMax",
    }),
    getBbrObj() {
      let res = {};
      if (this.bbrMultList.length > 0) {
        res = this.bbrMultList[this.bindex];
      }
      return res;
    },
    getSyrList() {
      let res = [];
      if (this.getBbrObj.bnfs.length > 0) {
        res = this.getBbrObj.bnfs;
      }
      return res;
    },
    showSame() {
      let res = false;
      if (this.pindex == 0 && this.getBbrObj.relationToAppnt != "4") {
        res = true;
      }
      return res;
    },
    beneficialOrderList() {
      let list = [];
      for (let i = 0; i < this.benefyOrderMax; i++) {
        const obj = {
          keyId: i + 1,
          text: `${i + 1}`,
        };
        list.push(obj);
      }
      return list;
    },
    infoReg() {
      return JSON.parse(JSON.stringify(this.inputReg.benefitModel));
    },
  },
  components: { FieldDescMode },
  watch: {
    userInfo: {
      handler: function (val) {
        if (this.pageLoad) {
          let bbrItem = JSON.parse(JSON.stringify(this.getBbrObj));
          bbrItem.bnfs[this.pindex] = Object.assign(
            {},
            bbrItem.bnfs[this.pindex],
            val
          );
          this.$store.commit("insert/UPDATE_MULT_BBR", {
            index: this.bindex,
            data: bbrItem,
          });
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      userType: "受益人",
      userFlag: `b${this.bindex + 1}syr${this.pindex + 1}`,
      sameAppent: false,
      enfold: true,
    };
  },
  mixins: [userInfoMix, radioMixin, popupMixin, bbrAndSyrInfoMix],
  created() {
    this.userInfo = this.getSyrList[this.pindex];
    // && !this.userInfo.beneficialOrder
    if (Number(this.pindex) === 0) {
      // 第一位受益人,受益顺序必须为1
      this.changeData({
        beneficialOrder: "1",
      });
      if (this.userInfo.beneficialRate <= 0) {
        this.changeData({
          beneficialRate: "100",
        });
      }
    }
    this.sameAppent = this.userInfo.isSame == "1";
    // 投被保人非同一人,受益人同投保人按钮显示
    this.initDefaultData();
    this.$nextTick(() => {
      this.pageLoad = true;
    });
  },
  methods: {
    formatNumber(value) {
      if (value === null || value === undefined) {
        return "";
      }
      // 将 value 转换为字符串
      value = String(value);
      return value.replace(/[^\d]|^[0]/g, "");
    },
    delUserItem() {
      this.$baseConfirm("是否要删除该受益人?", () => {
        this.$store.dispatch("insert/delSyrItem", {
          bindex: this.bindex,
          pindex: this.pindex,
        });
        this.$store.commit("updateLoad", true);
        this.$store.commit("common/SET_SYR_REFRESH", false);
        setTimeout(() => {
          this.$store.commit("common/SET_SYR_REFRESH", true);
          this.$store.commit("updateLoad", false);
        }, 30);
      });
    },
    saveForm() {
      // 校验+提交
      let label = "受益人";
      if (this.getSyrList.length > 1) {
        label = `受益人${this.pindex + 1}`;
      }
      let syrItem = JSON.parse(JSON.stringify(this.userInfo));
      // console.log("0---", syrItem);
      if (this.userInfo.isSame == "1") {
        const tbrInfo = JSON.parse(JSON.stringify(this.appnt));
        Object.keys(tbrInfo).map((key) => {
          if (syrItem.hasOwnProperty(key)) {
            syrItem[key] = tbrInfo[key];
          }
        });
        this.$store.dispatch("insert/updateSyrItem", {
          bindex: this.bindex,
          pindex: this.pindex,
          data: syrItem,
        });
      }
      const iptCfg = JSON.parse(JSON.stringify(this.infoReg));
      let res = validUserInfo(iptCfg, syrItem, "受益人");
      if (res.status == false) {
        let target = document.querySelector(
          `.bbr${this.bindex}syr${this.pindex}_${res.target}`
        );
        this.tipsInfo[res.target] = res.msg;
        if (target) {
          target.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });
        }
        this.$store.commit("common/SET_FIELD_MEAN_CONT", {
          label: `${label}规则校验`,
          desc: `${res.msg}`,
        });
      }
      return res;
    },
    changeAppent(type, val) {
      // 投被保人为同一人时,身故受益人不得为被保险人本人
      const tbrInfo = JSON.parse(JSON.stringify(this.appnt));
      if (val.value == "1") {
        if (this.getBbrObj.relationToAppnt == "4") {
          return this.$toast("投被保人为同一人时,身故受益人不得为被保险人本人");
        }
        Object.keys(tbrInfo).map((key) => {
          if (this.infoReg.hasOwnProperty(key)) {
            this.userInfo[key] = tbrInfo[key];
          }
        });
      } else {
        Object.keys(tbrInfo).map((key) => {
          if (this.infoReg.hasOwnProperty(key)) {
            if (key === "idType") {
              this.userInfo[key] = "0";
            } else if (key === "idName") {
              this.userInfo[key] = "身份证";
            } else if (key === "nationality") {
              this.userInfo[key] = "CHN";
            } else if (key === "nationalityName") {
              this.userInfo[key] = "中国";
            } else {
              this.userInfo[key] = "";
            }
          }
        });
      }
      this.changeData({
        relationToInsured: "",
        relationToInsuredName: "",
      });
      if (Number(this.pindex) === 0) {
        this.userInfo.beneficialOrder = "1";
        this.userInfo.beneficialRate = "100";
      }
      this.sameAppent = val.value == "1";
      if (this.infoReg.hasOwnProperty("isSame")) {
        this.userInfo.isSame = val.value == "1" ? "1" : "0";
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "../style.less";
</style>
